<template>
  <div class="xbkdiv1">
    <div class="xbktitle">
      <el-input size="medium" placeholder="请输入标题" v-model="input"></el-input>
    </div>
    <quill-editor
      v-model="content"
      ref="myQuillEditor"
      class="editor"
      :options="editorOption"
      @blur="onEditorBlur($event)"
      @focus="onEditorFocus($event)"
      @change="onEditorChange($event)"
    ></quill-editor>
    <h2>选择博客类型</h2>
    <div class="biaoqian">
      <el-button
      class="active"
      :class="[isActive==item.id?'active':'el-button1']" 
        size="mini"
        @click="tabsf(item.id)"
        v-for="(item,index) in tabs"
        :key="index"
      >{{item.name}}</el-button>
    </div>
    <el-button class="el-button2" type="info" @click="xieblog()">发表博客</el-button>
    <!-- <div class="html" v-html="html.blog"></div> -->
  </div>
</template>
<script>
import { addQuillTitle } from "@/js/quill-title.js";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import Quill from "quill";
import ImageResize from "quill-image-resize-module";
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
// 工具栏配置
const toolbarOptions = [
  ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线 -----['bold', 'italic', 'underline', 'strike']
  ["blockquote", "code-block"], // 引用  代码块-----['blockquote', 'code-block']
  [{ header: 1 }, { header: 2 }], // 1、2 级标题-----[{ header: 1 }, { header: 2 }]
  [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表-----[{ list: 'ordered' }, { list: 'bullet' }]
  [{ script: "sub" }, { script: "super" }], // 上标/下标-----[{ script: 'sub' }, { script: 'super' }]
  [{ indent: "-1" }, { indent: "+1" }], // 缩进-----[{ indent: '-1' }, { indent: '+1' }]
  [{ direction: "rtl" }], // 文本方向-----[{'direction': 'rtl'}]
  [{ size: ["small", false, "large", "huge"] }], // 字体大小-----[{ size: ['small', false, 'large', 'huge'] }]
  [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题-----[{ header: [1, 2, 3, 4, 5, 6, false] }]
  [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色-----[{ color: [] }, { background: [] }]
  [{ font: [] }], // 字体种类-----[{ font: [] }]
  [{ align: [] }], // 对齐方式-----[{ align: [] }]
  ["clean"], // 清除文本格式-----['clean']
  ["image"] // 链接、图片、视频-----['link', 'image', 'video']
]; // 引用
Quill.register("modules/imageResize", ImageResize); // 注册
export default {
  data() {
    return {
      input: "",
      content: "",
      editorOption: {
        modules: {
          imageDrop: true,
          imageResize: {
            displayStyles: {
              backgroundColor: "black",
              border: "none",
              color: "white"
            },
            modules: ["Resize", "DisplaySize", "Toolbar"]
          },
          toolbar: [
            ["bold", "italic", "underline", "strike"], // 加粗，斜体，下划线，删除线
            ["blockquote", "code-block"], // 引用，代码块
            [{ header: 1 }, { header: 2 }], // 标题，键值对的形式；1、2表示字体大小
            [{ list: "ordered" }, { list: "bullet" }], // 列表
            [{ script: "sub" }, { script: "super" }], // 上下标
            [{ indent: "-1" }, { indent: "+1" }], // 缩进
            [{ direction: "rtl" }], // 文本方向
            [{ size: ["small", false, "large", "huge"] }], // 字体大小
            [{ header: [1, 2, 3, 4, 5, 6, false] }], // 几级标题
            [{ color: [] }, { background: [] }], // 字体颜色，字体背景颜色
            [{ font: [] }], // 字体
            [{ align: [] }], // 对齐方式
            ["clean"], // 清除字体样式
            ["image", "video"] // 上传图片、上传视频
          ]
        },
        theme: "snow"
      },
      html: "",
      tabs: [],
      type: 0,
      isActive:0
    };
  },
  computed: {
    editor() {
      return this.$refs.quillEditor.quill;
    }
  },
  methods: {
    tabsf(type) {
      this.type = parseInt(type);
      this.isActive=parseInt(type)
    },
    open(message, type) {
      this.$message({
        message: message,
        type: type
      });
    },
    onEditorBlur() {
      // 失去焦点事件
      console.log(1);
    },
    onEditorFocus() {
      // 获得焦点事件
      console.log(2);
    },
    onEditorChange() {
      // 内容改变事件
      console.log(this.content);
    },
    xieblog() {
      if (this.input.trim().length > 0) {
        if (this.type > 0) {
          if (this.content.length > 0) {
            this.$http
              .post(this.poot + "insertblog", {
                blog: this.content,
                mailbox: this.user,
                type: this.type,
                title: this.input
              })
              .then(response => {
                this.html = response.data;
                console.log(response.data);
                this.open("发表成功", "success");
              })
              .catch(error => {
                this.open("发表失败", "error");
                console.log(error);
              });
          } else {
            this.open("检查内容是否为空", "warning");
          }
        } else {
          this.open("你还没有选择分类", "warning");
        }
      } else {
        this.open("检查标题是否为空", "warning");
      }
    },
    gettabs() {
      this.$http
        .get(this.poot + "selecttags")
        .then(response => {
          this.tabs = response.data;
          console.log(response.data);
        })
        .catch(function(error) {
          console.log(error);
        });
    }
  },
  mounted() {
    addQuillTitle();
    this.gettabs();
  },
  computed: {
    ...mapState(["leixing"]),
    ...mapState(["poot"]),
    ...mapState(["user"])
  }
};
</script>

<style scoped >
.active{
  background-color: #fff;
  margin: 10px;
  color: #1e1e1e;
  border: #fff 1px solid;
}
h2 {
  margin-top: 10px;
  color: #354b7b;
}
.biaoqian {
  margin-top: 20px;
}
.el-button1 {
 background-color:#1e1e1e;
  margin: 10px;
  color: #ffd04b;
  border: #fff 1px solid;
}
.el-button2 {
  width: 100%;
  margin-top: 20px;
}
.el-input {
  margin-top: 20px;
}
.html {
  width: 100%;
  background-color: #1e1e1e;
  margin-top: 700px;
}
.quill-editor {
  margin-top: 20px;
  background-color: #fff;
  height: 650px;
  padding-bottom: 70px;
}

.xbktitle {
  height: 40px;
  background-color: #161616;
  width: 100%;
}
.xbkdiv1 {
  overflow: auto;
  height: 760px;
  width: 100%;
  background-color: #161616;
}
.xbkdiv1::-webkit-scrollbar {
  display: none;
}
</style>
